<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="how to use timepicki timepicker in your website">
    <meta name="keywords" content="timepicki, timepicker, time, jquery, plugins">
    <meta name="author" content="senthil2rajan">

    <title>TimePicki - how to use jQuery Timepicker</title>

    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="css/style.css" rel="stylesheet">

  </head>

  <body>

    <div class="site-wrapper">

      <div class="site-wrapper-inner">

        <div class="cover-container">

          <div class="masthead clearfix">
            <div class="inner">
              <h3 class="masthead-brand">TimePicki v2.0</h3>
              <nav>
                <ul class="nav masthead-nav">
                  <li><a href="index.html">Home</a></li>
                  <li><a href="features.html">Features</a></li>
		  <li class="active"><a href="howtouse.html">How to use</a></li>
		  <li><a href="options.html">Options</a></li>
                  <li><a href="contact.html">Contact</a></li>
                </ul>
              </nav>
            </div>
          </div>

          <div class="inner cover height500">
            <h1 class="cover-heading">How to use</h1>
	    <div class="text-left">
            	<h3>HTML:</h3>
	    	<p>create input text field in body section.</p>
		<pre>&lt;input id='timepicker' type='text'name='timepicker'/&gt;</pre>
	    </div>
	    <div class="text-left">
            	<h3>CSS:</h3>
	    	<p>put timepicki.css file in your webpage for timepicker style.</p>
		<pre>&lt;link rel='stylesheet' type='text/css'href='css/timepicki.css'/&gt;</pre>
	    </div>
	    <div class="text-left">
            	<h3>JS:</h3>
	    	<p>put jquery library file and timepicki.js file with in script.</p>
		<pre>&lt;script type='text/javascript'src='js/jquery.js'&gt;&lt;/script&gt;</pre>
		<pre>&lt;script type='text/javascript'src='js/timepicki.js'&gt;&lt;/script&gt;</pre>
		<p>call timepicki() method with input element selector</p>
		<pre>&lt;script type='text/javascript'src='js/jquery.js'&gt; 
	$('#timepicker').timepicki(); 
&lt;/script&gt;</pre>
		<p>Now timepicker is ready your page, open your page and checkout timpicker.</p>
	    </div>
	    <div class="text-left">
            	<h3>Image:</h3>
	    	<p>copy and paste arrow images to your project's images directroy from timpicki images directory.</p>
	    </div>
            <p class="lead text-right">
              <a href="options.html" class="btn btn-sm btn-success">Set options</a>
              <a href="https://github.com/senthilraj/TimePicki" class="btn btn-sm btn-success">Download</a>
            </p>
          </div>

          <div class="mastfoot">
            <div class="inner">
              <p>Copyrights <a href="https://github.com/senthilraj/TimePicki">@Timepicki</a>, by <a href="https://twitter.com/senthil2rajan">@senthil2rajan</a>.</p>
            </div>
          </div>

        </div>

      </div>

    </div>

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

